<template>
  <div class="user">
      <div class="top">
      <img :src="imgsrc">
      <div class="avatar">
        <!-- <img src="../assets/img/user/user1.jpg" alt=""> -->
          <span class="username selfColor" >{{ $store.state.dataUser.user_name[0] }}</span>
      </div>
      <div class="name">
        <span>你好：{{$store.state.dataUser.user_name}}</span>
      </div>
    </div>
    <div class="grid">
      <van-grid direction="horizontal" :column-num="2" gutter="10px">
        <van-grid-item icon="setting-o" text="设置"  @click="popSet"/>
        <van-grid-item icon="friends-o" text="个人主页" @click="linkUserCenter"/>
        <van-grid-item icon="orders-o" text="历史" @click="linkHistory"/>
        <van-grid-item icon="star-o" text="收藏" @click="linkCollect"/>
        <van-grid-item icon="balance-list-o" text="账单" @click="linkBill"/>
        <van-grid-item icon="phone-o" text="客服" />
      </van-grid>
    </div>

    <div class="d5">
      <mt-button class="d6">
        <span class="s4">我的银行卡</span>
        <img src="../assets/img2/尖括号.png" alt="" />
      </mt-button>
      <div>
        <mt-button class="d6">
          <span class="s4">关于我们</span>
          <img src="../assets/img2/尖括号.png" alt="" />
        </mt-button>
        <mt-button class="d7">
          <span class="s5">意见反馈</span>
          <img src="../assets/img2/尖括号.png" alt="" />
        </mt-button>
        <mt-button class="d8">
          <span class="s6">联系客服</span>
        </mt-button>
      </div>
    </div>
    
    <!-- 设置页开始 -->
    <mt-popup v-model="isPopSet" position="right">
      <!-- 头部开始 -->
      <mt-header title="设置">
        <router-link to="/user" slot="left">
          <mt-button icon="back" @click="popSet"></mt-button>
        </router-link>
      </mt-header>
      <!-- 中间正文开始 -->
      <div class="mt-but">
        <mt-button slot="right" type="default" size="small" class="sz-but"
          >更改用户信息 <img class="img1" src="../assets/img/dy.png" alt=""
        /></mt-button>
        <mt-button type="default" size="small" class="sz-but"
          >夜间模式<img class="img1" src="../assets/img/dy.png" alt=""
        /></mt-button>
      </div>
      <div class="mt-but1">
        <mt-button type="default" size="small" class="sz-but"
          >关于我们<img class="img1" src="../assets/img/dy.png" alt=""
        /></mt-button>
        <mt-button type="default" size="small" class="sz-but"
          >清除缓存<img class="img1" src="../assets/img/dy.png" alt=""
        /></mt-button>
        <mt-button type="default" size="small" class="sz-but"
          >语言选择<img class="img1" src="../assets/img/dy.png" alt=""
        /></mt-button>
      </div>

      <!-- 头部结束 -->
      <section class="set">
        <mt-button class="logOut" type="danger" @click="logOut"
          >退出登录</mt-button
        >
      </section>
    </mt-popup>

    <!-- 设置页结束 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      isPopSet: false,
      ff: true,
      imgsrc: require("../assets/img/8.jpg"),
    };
  },
  methods: {
    linkHistory() {
      this.$router.push({ name: "history" });
    },
    linkCollect() {
      this.$router.push({ name: "collect" });
    },
    linkBill() {
      this.$router.push({ name: "bill" });
    },
    linkUserCenter() {
      this.$router.push({ name: "usercenter",params:{parent:"user"} });
    },
    show() {
      if (this.ff == true) {
        this.ff = false;
      } else {
        this.ff = true;
      }
    },
    show2() {
      if (this.ff == true) {
        this.ff = false;
      } else {
        this.ff = true;
      }
    },

    popSet() {
      // 弹出设置页面
      this.isPopSet = !this.isPopSet;
    },

    // 退出登录
    logOut() {
      // 将用户数据清空
      this.$store.state.dataUser = "";
      sessionStorage.resultData = "";

      // 跳转界面回login
      this.$router.push({
        name: "login",
      });
    },
  },
};
</script>
<style>
 .user .username {
  display: inline-block;
  width: 70px;
  height: 70px;
  /* background-color: #0f6957; */
  border-radius: 50%;
  line-height: 66px;
  text-align: center;
  color: rgb(245, 239, 239);
  font-size: 2.6rem;
  box-shadow: 1px 1px 9px 0px #444;
}
</style>
<style lang="less">
.user{
  width: 100%;
  overflow-x: hidden;
  .top{
    position: relative;
    img{
      width: 100%;
    }
    .avatar span{
      width: 70px;
      height: 70px;
      border-radius: 50%;
      // background-color:white;
      position: absolute;
      top: 67px;
      left: 50%;
      margin-left:-35px ;

    }
    .name{
      position: absolute;
      top: 166px;
      left: 50%;
      color: white;
      font-size: 20px;
      width: 200px;
      display: flex;
      span{
        width: 200px;
        text-align: center;
        
      margin-left: -6rem;
      }
    }
  }
}
.user .d5 {
  width: 100%;
  height: 150px;
}
.user .d5 .d6 {
  width: 375px;
  display: flex;
  margin-top: 10px;
  font-size: 16px;
  justify-content: space-between;
  background: #fff;
  border-radius: 0;
}

.user .d5 img {
  position: absolute;
  right: 5px;
  top: 11px;
}
.user .d5 .d6 .s4,
.s5 {
  line-height: 41px;
}
.user .d5 .d7,
.d8 {
  width: 375px;
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  background: #fff;
  border-radius: 0;
}

/* 设置页 */
.user .set {
  background-color: rgb(248, 242, 242);
  position: absolute;
  right: 1rem;
  top: 1rem;
}
/* 设置页 */
.user .mint-header {
  background-color: #007d65;
}
.user .logOut {
  /* background-color: #fff; */
  position: absolute;
  right: 13px;
  top: 33rem;
  /* right: 50%; */
  /* transform: translateX(50%); */
  width: 18rem;
}
.user .mint-popup {
  width: 100%;
  height: 100%;
  background-color: rgb(236, 233, 226);
}
.user .sz-but {
  width: 80%;
}
.user .mt-but {
  background-color: #fff;
}
.user .mt-but1 {
  background-color: #fff;
  margin-top: 10px;
}
.user .mt-but .mint-button--small {
  display: inline-block;
  font-size: 16px;
  padding: 0 0px;
  height: 47px;
  width: 100%;
  padding-left: 15px;
  text-align: left;
}
.user .mt-but1 .mint-button--small {
  display: inline-block;
  font-size: 16px;
  padding: 0 0px;
  height: 47px;
  width: 100%;
  padding-left: 15px;
  text-align: left;
}
.user .img1 {
  position: absolute;
  top: 45%;
  right: 10px;
  width: 9px;
  height: 9px;
}
</style>